<div class="row">
  <div class="col-4 mb-3">
    <button
      class="btn mr-3"
      *ngFor="let nav of navs"
      [routerLink]="nav.url"
      routerLinkActive="btn-primary"
      #router="routerLinkActive"
      [class.btn-secondary]="!router.isActive"
    >
      {{ nav.title }}
    </button>
  </div>
  <div class="col-3">
    <m-key-search [useRouteQueryParam]="true"></m-key-search>
  </div>
  <div class="col-5 text-right">
    <m-button-icon icon="flaticon-add" color="info" routerLink="/message/client/send">
      平台消息
    </m-button-icon>
  </div>
  <div class="col-12">
    <m-data-table
      *ngIf="result$ | async as result"
      [selection]="selection"
      [data]="result.list"
      [result]="result"
    >
      <ng-container mDataTableColumn="title" header="消息标题">
        <ng-template let-id="id" let-title="content.title">
          <td [title]="title">
            <m-go-detail [g_id]="id" [g_name]="title">
              <span [dir]="JSON_stringify(content)">{{ title | ellipsis }}</span>
            </m-go-detail>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="desc" header="消息简介">
        <ng-template let-message="content.message">
          <td class="content" [title]="message">{{ message | ellipsis }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="zone_count" header="区域数量">
        <ng-template let-areaCount="jobs[0].area_count">
          <td>{{ areaCount }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="user_count" header="人员数量">
        <ng-template let-userCount="jobs[0].users">
          <td>{{ userCount.length }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="status" header="状态">
        <ng-template let-status="jobs[0].status">
          <td>{{ status | taskStatus }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="sender" header="发送人">
        <ng-template let-admin="admin">
          <td>
            <a *ngIf="admin">{{ admin.full_name }}</a>
          </td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="time" header="下发时间">
        <ng-template let-created_at="created_at">
          <td>{{ created_at | date }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn="time" header="操作">
        <ng-template let-id="id" let-title="content.title" let-job="jobs[0]">
          <td>
            <button mat-icon-button [matMenuTriggerFor]="menuRef">
              <mat-icon>edit</mat-icon>
            </button>
            <mat-menu #menuRef>
              <button mat-menu-item (click)="goDetail(id, title)">详情</button>
              <button *ngIf="canCancel(job)" mat-menu-item (click)="cancel(job.id)">取消</button>
            </mat-menu>
          </td>
        </ng-template>
      </ng-container>
      <m-pagination [pageSize]="result.pageSize" [length]="result.total">
        <ng-container *ngIf="type === 'suspend' || type === 'all'">
          <button class="btn btn-sm btn-secondary mr-3" (click)="selection.select(result.list)">
            全选
          </button>
          <button class="btn btn-sm btn-secondary" [matMenuTriggerFor]="batchMenuRef">
            批量操作
          </button>
          <mat-menu #batchMenuRef>
            <button mat-menu-item (click)="cancel()">取消</button>
          </mat-menu>
        </ng-container>
      </m-pagination>
    </m-data-table>
  </div>
</div>
